<template>
  <div class="col-md-12">
    <h2 class="pt-2 pb-3 title">
      <div class="line"></div>
      <span> 发表留言 </span>
    </h2>
    <form class="needs-validation">
      <div class="row g-3">
        <div class="col-12">
          <label for="name" class="form-label">姓名:</label>
          <input
            type="text"
            class="form-control"
            id="name"
            placeholder="您的姓名"
            required
            v-model="message.name"
          />
        </div>

        <div class="col-12">
          <label for="email" class="form-label">邮箱:</label>
          <input
            type="email"
            class="form-control"
            id="email"
            placeholder="name@email.com"
            required
            v-model="message.email"
          />
        </div>

        <div class="col-12">
          <div>
            <p class="form-label">性别:</p>
            <div class="form-check">
              <input
                id="male"
                name="gender"
                type="radio"
                class="form-check-input"
                required
                v-model="message.gender"
                value="1"
              />
              <label class="form-check-label" for="male">男</label>
            </div>
            <div class="form-check">
              <input
                id="female"
                name="gender"
                type="radio"
                class="form-check-input"
                required
                v-model="message.gender"
                value="0"
              />
              <label class="form-check-label" for="female">女</label>
            </div>
          </div>
        </div>

        <div class="col-12 py-2">
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              type="checkbox"
              role="switch"
              id="unnamed-switch"
            />
            <label for="unnamed-switch">匿名评论</label>
          </div>
        </div>

        <div class="col-12 py-2">
          <input
            class="list-group-item list-group-item-action list-group-item-success form-control"
            placeholder="姓名,男性,name@email.com"
            v-model="tip"
          />
        </div>

        <div class="col-12">
          <label class="form-label">留言内容:</label>
          <textarea
            class="form-control"
            name=""
            id=""
            cols="30"
            rows="5"
            placeholder="请输入您要发表的内容"
            v-model="message.content"
          >
          </textarea>
        </div>

        <div class="col-12 py-2">
          <p
            class="list-group-item list-group-item-action list-group-item-warning"
          >
            {{ promptMsg }}
          </p>
        </div>
      </div>
      <hr class="my-4" />
      <button
        class="w-100 btn btn-success btn-lg"
        type="submit"
        v-on:click="submit"
      >
        提交
      </button>
    </form>
  </div>
</template>
<script setup>
const prors = defineProps({
    message:Object,
    submit:Function,
    promptMsg:String,
})
</script>
<style></style>
